<template>
    <!-- 设置-小程序 -->
      <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
          <div class="flex-wrapper">
    
            <div class="right">
              <div class="content">
                <div class="content-box title">
                  <div class="line"></div>
                  <div class="right title">逛逛配置</div>
                </div>
                <div class="content-box">
                  <div class="left">逛逛开启：</div>
                  <div class="right">
                    <RadioGroup v-model="formData.community_status">
                      <Radio :label="1">
                        <span>开启</span>
                      </Radio>
                      <Radio :label="0">
                        <span>关闭</span>
                      </Radio>
                    </RadioGroup>
                  </div>
                </div>
                <div class="content-box">
                  <div class="left">佣金：</div>
                  <div class="right">
                    <Input v-model="formData.community_money" type="number"/>
                  </div>
                </div>
                <div class="content-box">
                  <div class="left">图片免审核：</div>
                  <div class="right">
                    <RadioGroup v-model="formData.community_audit">
                      <Radio :label="1">
                        <span>免审核</span>
                      </Radio>
                      <Radio :label="0">
                        <span>审核</span>
                      </Radio>
                    </RadioGroup>
                  </div>
                </div>
                <div class="content-box">
                  <div class="left">短视频审核：</div>
                  <div class="right">
                    <RadioGroup v-model="formData.community_video_audit">
                      <Radio :label="1">
                        <span>免审核</span>
                      </Radio>
                      <Radio :label="0">
                        <span>审核</span>
                      </Radio>
                    </RadioGroup>
                  </div>
                </div>
                <div class="content-box">
                  <div class="left">移动端内容展示：</div>
                  <div class="right">
                    <CheckboxGroup v-model="formData.community_app_switch">
                      <Checkbox :label="1">
                        <span>图文展示</span>
                      </Checkbox>
                      <Checkbox :label="2">
                        <span>短视频展示</span>
                      </Checkbox>
                    </CheckboxGroup>
                  </div>
                </div>
                <div class="content-box">
                  <div class="left">允许发帖用户：</div>
                  <div class="right">
                    <RadioGroup v-model="formData.community_auth">
                      <Radio :label="1">
                        <span>审核用户</span>
                      </Radio>
                      <Radio :label="0">
                        <span>全部用户</span>
                      </Radio>
                    </RadioGroup>
                  </div>
                </div>
                <div class="content-box">
                  <div class="left">评论开关：</div>
                  <div class="right">
                    <RadioGroup v-model="formData.community_reply_status">
                      <Radio :label="1">
                        <span>开启</span>
                      </Radio>
                      <Radio :label="0">
                        <span>关闭</span>
                      </Radio>
                    </RadioGroup>
                  </div>
                </div>
                <div class="content-box">
                  <div class="left">评论用户：</div>
                  <div class="right">
                    <RadioGroup v-model="formData.community_reply_auth">
                      <Radio :label="1">
                        <span>绑定手机号用户</span>
                      </Radio>
                      <Radio :label="0">
                        <span>全部用户</span>
                      </Radio>
                    </RadioGroup>
                  </div>
                </div>
                <div class="content-box">
                  <div class="left">评论审核：</div>
                  <div class="right">
                    <RadioGroup v-model="formData.community_reply_audit">
                      <Radio :label="1">
                        <span>审核</span>
                      </Radio>
                      <Radio :label="0">
                        <span>免审核</span>
                      </Radio>
                    </RadioGroup>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Card>
        <Card :bordered="false" dis-hover class="submit-card">
          <Button type="primary" @click="submitForm">提交</Button>
        </Card>
      </div>
    </template>
    
    <script>
    import { saveBasicsApi, getNewFormBuildRuleApi } from "@/api/setting";
    import { mapState } from "vuex";
    export default {
      name: "communityTemplate",
      data() {
        return {
          formData: {
            community_reply_audit:'',
            community_reply_auth: '',
            community_reply_status: '',
            community_auth: '',
            community_video_audit: '',
            community_audit: '',
            community_money: '',
            community_status: '',
            community_app_switch: [],
          },
        };
      },
      created() {
        getNewFormBuildRuleApi('community').then(res => {
            let data = res.data;
            this.formData.community_status = data.community_status.value;
            this.formData.community_money = data.community_money.value;
            this.formData.community_audit = data.community_audit.value;
            this.formData.community_video_audit = data.community_video_audit.value;
            this.formData.community_app_switch = data.community_app_switch.value;
            this.formData.community_auth = data.community_auth.value;
            this.formData.community_reply_status = data.community_reply_status.value;
            this.formData.community_reply_auth = data.community_reply_auth.value;
            this.formData.community_reply_audit = data.community_reply_audit.value;
        })
      },
      watch: {
        $route(to, from) {},
      },
      computed: {
        ...mapState("media", ["isMobile"]),
        labelWidth() {
          return this.isMobile ? undefined : 80;
        },
        labelPosition() {
          return this.isMobile ? "top" : "left";
        },
      },
      methods: {
        submitForm () {
          saveBasicsApi(this.formData).then(res => {
            this.$Message.success(res.msg);
          }).catch(res => {
            this.$Message.error(res.msg);
          });
        },
      },
    };
    </script>
    
    <style scoped lang="stylus">
    .template_sp_box {
      padding: 5px 0;
      box-sizing: border-box;
    }
    
    .template_sp {
      display: block;
      padding: 2px 0;
      box-sizing: border-box;
    }
    
    .flex-wrapper {
      display: flex;
      border-radius: 10px;
    }
    
    .iframe-box {
      width: 294px;
      height: 523px;
      border-radius: 10px;
      margin-top: 14px;
      margin-left: 24px;
    }
    
    .ivu-mt {
      // height: 600px;
    }
    
    .content {
      padding: 0 0 0 60px;
      margin-top: 60px;
    
      &:first-child {
        margin-top: 40px;
      }
    
      .ivu-radio-wrapper {
        margin-right: 30px;
      }
    }
    
    .content > .title {
      padding-bottom: 30px;
      margin-bottom: 0;
      font-size: 15px;
      line-height: 15px;
      color: #000000;
    }
    
    .content-box {
      display: flex;
      align-items: center;
      margin-bottom: 26px;
      color: #333;
    
      .tip {
        width: 348px;
        margin-top: -12px;
        font-size: 12px;
        line-height: 17px;
        color: #999999;
      }
    
      &.last {
        .ivu-btn-primary {
          margin-top: 14px;
        }
      }
    }
    
    .content-box:last-child {
      margin-bottom: 0;
    }
    
    .content-box.last {
      margin-top: 0;
      color: #999999;
    }
    
    .line {
      width: 3px;
      height: 16px;
      background-color: #1890FF;
      margin-right: 11px;
    }
    
    .content-box .title {
      font-size: 16px;
      font-weight: bold;
    }
    
    .content-box > span {
      color: #F5222D;
      font-size: 20px;
    }
    
    .content-box .left {
      width: 130px;
      text-align: right;
    }
    
    .content-box .right {
      width: 460px;
    }
    
    .rad {
      margin-left: 20px;
    }
    
    .mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 312px;
      height: 550px;
      background-color: rgba(0, 0, 0, 0);
    }
    
    .submit-card {
      margin-top: 14px;
      text-align: center;
    
      .ivu-btn {
        padding: 0 20px;
      }
    }
    
    .ivu-btn-text {
      color: #2D8CF0;
    }
    
    .ivu-btn-text:focus {
      box-shadow: none;
    }
    
    /deep/.ivu-drawer-wrap {
      .ivu-tabs-bar {
        margin-bottom: 30px;
      }
    
      .ivu-tabs-nav {
        display: flex;
        width: 100%;
      }
    
      .ivu-tabs-ink-bar {
        display: none;
      }
    
      .ivu-tabs-tab {
        flex: 1;
        padding: 10px 16px 10px 32px;
        margin-right: 0;
        background-color: #F5F5F5;
        text-align: center;
        font-size: 15px;
        line-height: 21px;
        color: #666666;
        transition: none;
    
        &::before {
          content: '';
          position: absolute;
          top: 6px;
          left: -14px;
          width: 29px;
          height: 29px;
          border: inherit;
          border-left-color: transparent;
          border-bottom-color: transparent;
          background-color: #FFFFFF;
          transform: rotate(45deg);
        }
    
        &::after {
          content: '';
          position: absolute;
          top: 6px;
          right: -14px;
          z-index: 3;
          width: 29px;
          height: 29px;
          border: inherit;
          border-left-color: transparent;
          border-bottom-color: transparent;
          background: inherit;
          transform: rotate(45deg);
        }
    
        &:hover {
          color: #666666 !important;
        }
      }
    
      .ivu-tabs-tab-active {
        background-color: #2D8BEF;
        color: #FFFFFF;
    
        &:hover {
          color: #FFFFFF !important;
        }
      }
    
      .ivu-timeline {
        .ivu-timeline-item-tail {
          left: 10px;
        }
    
        .ivu-timeline-item-head-custom {
          left: 0;
          padding: 0;
          margin-top: 0;
        }
    
        .ivu-timeline-item-content {
          top: -10px;
          padding: 0 0 10px 30px;
        }
    
        .dot {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #2D8CF0;
          line-height: 20px;
          color: #FFFFFF;
        }
    
        .title {
          margin-bottom: 10px;
          font-size: 16px;
          line-height: 20px;
          color: #333333;
        }
    
        .item + .item {
          margin-top: 20px;
        }
    
        .text {
          font-size: 12px;
          line-height: 17px;
          color: #666666;
        }
    
        .image {
          margin-top: 8px;
        }
    
        img {
          display: block;
          width: 320px;
          height: 160px;
    
          + img {
            margin-top: 8px;
          }
        }
    
        .ivu-alert {
          margin-top: 8px;
          color: #666666;
    
          div span {
            color: #2D8CF0;
          }
        }
      }
    }
    </style>